<template>
	<view class="title" :style="{ marginTop: source.margin + 'px', marginBottom: source.margin2 + 'px' }">
		<view :class="source.style.active" :style="{ color:source.color, borderColor: source.border_color, backgroundColor: source.background }">
			<view v-if="source.style.active === 'style-2'"></view>
			<view :style="{ color: source.color, borderColor: source.border_color }">{{ source.title }}</view>
			<view v-if="source.style.active === 'style-2'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
		   source: [Object]
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';
.title {
	& > view {
		height:@height;
		display:flex;
		align-items: center;
        font-size:@title;
		position: relative;		
		&.style-1 {
			padding-left: 15px;	
		}
		&.style-2 {
			justify-content: space-between;
			& > view { position: relative }
			& > view:not(:nth-of-type(2)) {
				flex: 1;
			}
			& > view:nth-of-type(1)::after,
			& > view:nth-of-type(3)::after,
			& > view:nth-of-type(1)::before, 
			& > view:nth-of-type(3)::before {
				position: absolute;
				content: '';				
			}
			& > view:nth-of-type(1)::after, 
			& > view:nth-of-type(3)::after {
				border-top:1px solid #ddd;
				right: 20upx;
				left: 20upx;
			}
			& > view:nth-of-type(1)::before {
				right:15upx;
			}
			& > view:nth-of-type(3)::before {
				left:15upx;
			}
			& > view:nth-of-type(1)::before, 
			& > view:nth-of-type(3)::before {
				width: 16upx;
				height: 16upx;
				background-color:#ddd;
				border-radius: 50%;
				top: -8upx;
			}			
		}
		&.style-3 {
			border-left:5px;
			border-left-style: solid;
			padding-left: 15px;
		}
	}
}
</style>
